import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createContainer } from 'utils/hoc'
import { Form } from 'antd'
import ContentBox from 'components/contentBox'
import CustomTable from 'components/common/table'
import { PAGE_SIZE } from 'constants'
import PropTypes from 'prop-types'

import Style from './followDetails.css'

class FollowDetails extends Component {
  static propTypes = {
    match: PropTypes.any,
    getFollowList: PropTypes.func,
    followData: PropTypes.any
  }
  constructor (props) {
    super(props)
    this.state = {
      pageNo: 1,
      pageSize: 20
    }
    this.onPageChange = this.onPageChange.bind(this)
    this.onShowSizeChange = this.onShowSizeChange.bind(this)
  }

  getTableCols () {
    return [
      {
        title: '被关注创作者姓名',
        dataIndex: 'authorName',
        key: 'authorName',
        width: 100
      },
      {
        title: '作品数量',
        dataIndex: 'commodityCount',
        key: 'commodityCount',
        width: 100,
        sorter: (a, b) => a.commodityCount - b.commodityCount

      },
      {
        title: '关注时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 100,
        sorter: (a, b) => a.createTime - b.createTime
      }
    ]
  }

  getUsersTableCols () {
    return [
      {
        title: '用户Id',
        dataIndex: 'userId',
        key: 'userId',
        width: 100
      },
      {
        title: '用户手机号',
        dataIndex: 'mobile',
        key: 'mobile',
        width: 100
      },
      {
        title: '用户名称',
        dataIndex: 'userName',
        key: 'userName',
        width: 100
      },
      {
        title: '用户类型',
        dataIndex: 'memberLevelName',
        key: 'memberLevelName',
        width: 100
      },
      {
        title: '现有关注创作者数量',
        dataIndex: 'attentionCount',
        key: 'attentionCount',
        width: 100
      },
      {
        title: '取消关注创作者数量',
        dataIndex: 'order',
        key: 'order',
        width: 100
      }
    ]
  }

  componentDidMount () {
    const { id } = this.props.match.params
    this.id = id
    const { pageSize, pageNo } = this.state
    this.props.getFollowList({
      pageSize,
      pageNo,
      userId: id
    })
  }

  onPageChange (pageNo, pageSize) {
    const params = {}
    params.pageNo = pageNo
    params.pageSize = pageSize
    params.userId = this.id
    this.setState({
      pageNo
    })
    this.props.getFollowList(params)
  }

  onShowSizeChange (current, pageSize) {
    this.setState({
      pageSize
    })
    const params = {}
    params.pageNo = current
    params.pageSize = pageSize
    params.userId = this.id
    this.props.getFollowList(params)
  }

  render () {
    const { followData } = this.props
    const { pageNo } = this.state
    const pagination = {
      showSizeChanger: true,
      current: pageNo,
      total: followData && followData.totalCount,
      onChange: this.onPageChange,
      pageSize: PAGE_SIZE
    }
    return (
      <>
        <ContentBox>
          <div className={Style['users-manage-follow-details']}>
            <div className={Style['users-info-container']}>
              <CustomTable loading={false} columns={this.getUsersTableCols()} dataSource={[{
                userId: followData && followData.userId,
                mobile: followData && followData.mobile,
                userName: followData && followData.userName,
                memberLevelName: followData && followData.memberLevelName,
                attentionCount: followData && followData.attentionCount
              }]} pagination={false} bordered />
            </div>
            <div className={Style['title']}>数据列表</div>
            <CustomTable loading={!followData} columns={this.getTableCols()} dataSource={(followData && followData.attentionList) || []} pagination={pagination} />
          </div>
        </ContentBox>
      </>
    )
  }
}

const mapState = state => ({
  followData: state.users.followData
})
const mapDispatch = dispatch => ({
  getFollowList: dispatch.users.getFollowList
})
const FormFollowDetails = Form.create()(FollowDetails)

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(FormFollowDetails)
)
